<template>
  <div class="balance-log">
    <div class="search-form">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="卡号">
          <el-input v-model="searchForm.card_no" placeholder="请输入卡号" clearable />
        </el-form-item>
        <el-form-item label="变更类型">
          <el-select v-model="searchForm.change_type" placeholder="请选择" clearable>
            <el-option label="充值" value="recharge" />
            <el-option label="分配" value="allocate" />
            <el-option label="接收" value="receive" />
            <el-option label="消费" value="consume" />
            <el-option label="退款" value="refund" />
          </el-select>
        </el-form-item>
        <el-form-item label="变更时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="card_no" label="卡号" width="180" />
      <el-table-column label="持卡人信息" width="200">
        <template #default="scope">
          <div>{{ scope.row.black_card?.user?.name || scope.row.black_card?.user?.company_name }}</div>
          <div class="text-gray">{{ scope.row.black_card?.user?.phone }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="change_type" label="变更类型" width="120">
        <template #default="scope">
          <el-tag :type="getChangeTypeTag(scope.row.change_type)">
            {{ getChangeTypeText(scope.row.change_type) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="变更金额" width="120">
        <template #default="scope">
          <span :class="{ 'text-red': scope.row.amount < 0, 'text-green': scope.row.amount > 0 }">
            {{ scope.row.amount > 0 ? '+' : '' }}¥{{ scope.row.amount }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="总额度变更" width="200">
        <template #default="scope">
          <div>变更前：¥{{ scope.row.before_balance }}</div>
          <div>变更后：¥{{ scope.row.after_balance }}</div>
        </template>
      </el-table-column>
      <el-table-column label="可用额度变更" width="200">
        <template #default="scope">
          <div>变更前：¥{{ scope.row.before_available }}</div>
          <div>变更后：¥{{ scope.row.after_available }}</div>
        </template>
      </el-table-column>
      <el-table-column label="冻结额度变更" width="200">
        <template #default="scope">
          <div>变更前：¥{{ scope.row.before_frozen }}</div>
          <div>变更后：¥{{ scope.row.after_frozen }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="related_id" label="关联单号" width="180" />
      <el-table-column label="操作人" width="150">
        <template #default="scope">
          <div>{{ scope.row.operator?.name }}</div>
          <div class="text-gray">{{ scope.row.operator_name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="操作时间" width="180" />
      <el-table-column prop="remark" label="备注" width="200" show-overflow-tooltip />
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 15, 20, 30]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRequest } from '@/hooks/useRequest'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const { request } = useRequest()

// 搜索表单
const searchForm = reactive({
  card_no: '',
  change_type: '',
  dateRange: [],
  start_time: '',
  end_time: ''
})

// 日期范围变更
const handleDateChange = (val) => {
  if (val) {
    searchForm.start_time = val[0]
    searchForm.end_time = val[1]
  } else {
    searchForm.start_time = ''
    searchForm.end_time = ''
  }
}

// 表格数据
const tableData = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(15)
const total = ref(0)

// 获取余额变更记录列表
const getList = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      limit: pageSize.value,
      card_no: searchForm.card_no,
      type: searchForm.change_type,
      start_time: searchForm.dateRange[0] || '',
      end_time: searchForm.dateRange[1] || ''
    }
    const res = await axios.get('/app/ky_black/admin/black_card/balance_log', { params })
    if (res.data.code === 1) {
      tableData.value = res.data.data.list
      total.value = res.data.data.total
    } else {
      ElMessage.error(res.data.msg || '获取数据失败')
    }
  } catch (error) {
    console.error('获取余额变更记录失败:', error)
    ElMessage.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  getList()
}

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  searchForm.dateRange = []
  handleSearch()
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  getList()
}

// 获取变更类型标签类型
const getChangeTypeTag = (type) => {
  const map = {
    recharge: 'success',
    allocate: 'warning',
    receive: 'info',
    consume: 'danger',
    refund: 'success'
  }
  return map[type] || 'info'
}

// 获取变更类型文本
const getChangeTypeText = (type) => {
  const map = {
    recharge: '充值',
    allocate: '分配',
    receive: '接收',
    consume: '消费',
    refund: '退款'
  }
  return map[type] || type
}

// 初始化
getList()
</script>

<style scoped>
.balance-log {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.text-gray {
  color: #909399;
  font-size: 13px;
}

.text-red {
  color: #F56C6C;
}

.text-green {
  color: #67C23A;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 